<template>
    <div class="outDiv">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex()">
                < 返回 </label>
        </div>
        <div class="head">
            <div class="top">
                <div class="topImg">
                    <span><img src="../imgs/myicon.png" alt=""></span>
                </div>
                <div class="topText">
                    <span>{{ userName }}</span>
                    <span>560积分</span>
                </div>
                <div class="topList">
                    <select name="time">
                        <option value="2022年">2022年</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="bC">
                <span>{{ serverNumber }}<b>次</b></span>
                <span>服务次数</span>
            </div>
            <div class="bC">
                <span>{{ serverTime }}<b>小时</b></span>
                <span>服务时长</span>
            </div>
            <div class="bC">
                <span>{{ serverPoint }}<b>分</b></span>
                <span>服务积分</span>
            </div>
        </div>
        <div class="footer">
            <div class="list">
                <div class="fList" v-for="item in items" @click="btnDetail">
                    <div class="left">
                        <span>{{ item.statue }}</span>
                    </div>
                    <div class="right">
                        <span>{{ item.content }}</span>
                        <span>{{ item.source }}&nbsp; &nbsp; &nbsp; &nbsp;{{ item.vtime.split('至')[0] }}</span>
                    </div>
                </div>
                <span style="margin-top: 2%;">没有更多了</span>

            </div>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// == 定义相关变量-开始 ==
let serverNumber = ref('')
let serverTime = ref('')
let serverPoint = ref('')
let userName = ref('')
let totalPoint = ref('')
let items = ref([])
let router = useRouter()
let actId = ref()
// == 定义相关变量-结束 ==
// == 动作函数-开始 ==
onMounted(() => {
    fetch('http://localhost:5000/point').then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        data.forEach(item => {
            serverNumber.value = item.number,
                serverTime.value = item.servertime,
                serverPoint.value = item.point
            userName.value = item.name
            actId.value = item.id
        })
    })
    fetch('http://localhost:5000/volunteers').then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        // 对状态进行处理 分别是 审核中-2 审核拒绝-0 审核通过-1
        data.forEach(item => {
            if (item.statue === 2) {
                item.statue = '审核中'
            } else if (item.statue === 1) {
                item.statue = '审核通过'
            } else if (item.statue === 0) {
                item.statue = '审核拒绝'
            }
        })
        items.value = data
    })
})

function btnIndex() {
    router.push('/index')
}

function btnDetail() {
    let id = parseInt(actId.value)
    router.push(`/serverdetail/${id}`)
}
// == 动作函数-结束 ==
</script>
<style scoped>
label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}

.list {
    width: 100%;
    height: 100%;
    margin-top: 10%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left {
    height: 90px;
    width: 25%;
    align-items: flex-end;
    display: flex;
    background-image: url(../imgs/volunteer.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.left span {
    min-width: 50%;
    background-color: #b9575780;
    color: #fff;
}

.right {
    flex: 1;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #deedf94d;
}

.fList {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 3%;
}

.bC {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 3;
}

.outDiv {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #5f9ea063;
}

.top {
    width: 100%;
    height: 55%;
    /* align-items: center; */
    display: flex;
    margin-top: 1%;
    color: #fff;
}

.topText {
    margin-left: -2%;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.topList {
    align-items: center;
    justify-content: end;
    display: flex;
    flex: 1;
}

.topList select {
    font-size: 12px;
    text-align: center;
    height: 40%;
    width: 30%;
    border-radius: 15px;
    background-color: #5f9ea000;
    outline: none;
    color: #fff;
    margin-right: 5%;
    border: none;
}

.topImg span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.topImg img {
    width: 70%;
    border-radius: 50%;
}


.topImg {
    width: 20%;
    display: flex;
}

.head {
    width: 100%;
    height: 15%;
    margin-top: 2%;
    font-family: cursive;
    background-color: #5f9ea000;
    ;

}

.body {
    border-radius: 10px;
    position: absolute;
    width: 90%;
    height: 10%;
    background-color: #ffffff87;
    top: 10%;
    display: flex;
    justify-content: space-evenly;
}

.footer {
    width: 100%;
    min-height: 10%;
    overflow: auto;
    background-color: color(display-p3 0.99 0.97 0.97 / 0.12);
}
</style>